<template>
  <div class="layout">
    <div class="pre">
      <div class="min" v-show="!isNoMessage1" ref="myRef_one" id="echarts"></div>
      <div class="no_data" v-show="isNoMessage1">
        <img class="no_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">暂无数据</div>
      </div>
    </div>
    <div class="pre" style="margin-top: 20px">
      <div class="pre_title" style="padding: 10px 20px">
        <span class="title-text">详细数据</span>
        <el-button @click="exportCus()">导出</el-button>
      </div>
      <div class="table-detail">
        <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#33302D' }">
          <el-table-column property="follow_type" label="跟进阶段" />
          <el-table-column property="cust_num" label="客户数" />
          <el-table-column property="proportion" label="所占比例">
            <template #default="scope">
              <div>
                <span>{{ scope.row.proportion }}%</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="transform_p" label="阶段转换率">
            <template #default="scope">
              <div>
                <span>{{ scope.row.transform_p }}%</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column property="stay_day" label="最长停留天数" />
          <el-table-column property="ave_day" label="平均停留天数" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref, inject, watch } from 'vue'
  import { getBoardfunnelexport } from '@/api/customerbulletin/bulleinManage'
  import { export2Img } from '@/utils/utils'
  import { getDay } from '@/utils/timeCycle'
  let echarts = inject('ec')
  const myRef_one = ref(null)
  const isNoMessage1 = ref(false)
  const isNoMessage2 = ref(false)
  const props = defineProps(['completionData', 'deliveryData', 'params'])
  const tableData = ref(null)
  const params = reactive({
    departments: [],
    screen_time: [],
    employee_ids: ''
  })
  //客户群发任务完成率
  const getChart = (data: any) => {
    if (data.length == 0) {
      isNoMessage1.value = true
      return
    } else {
      isNoMessage1.value = false
    }
    let myChart_one = echarts.init(myRef_one.value)
    myChart_one.setOption({
      series: [
        {
          name: 'Funnel',
          type: 'funnel',
          left: '10%',
          top: 60,
          bottom: 60,
          width: '80%',
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'none',
          gap: 2,
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}（{c}）人'
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          color: ['#74BAFF', '#FBD316', '#C699FF', '#FF8693', '#93E7A1'],
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: data
        }
      ]
    })
  }
  const datatable = (data: any) => {
    tableData.value = data
  }
  // 导出客户
  const exportCus = () => {
    params.departments = props.params.departments
    params.screen_time = props.params.screen_time
    params.employee_ids = props.params.employee_ids
    getBoardfunnelexport(params).then((res: any) => {
      console.log(res)
      window.location = res.url
    })
  }
  onMounted(() => {})
  watch(
    () => props.completionData,
    (val) => {
      console.log(val, '----val')
      getChart(val)
    }
  )
  watch(
    () => props.deliveryData,
    (val) => {
      datatable(val)
    }
  )
</script>
<style lang="scss" scoped>
  .layout {
    width: 100%;
    
    margin-top: 16px;
    .pre {
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;

      &:nth-of-type(2) {
        border-top: 16px solid #fbfbfb;
      }
    
      &_title {
        padding: 20px;
        border-bottom: 1px solid #eaeaea;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .export {
          display: inline-block;
          width: 64px;
          height: 36px;
          text-align: center;
          line-height: 36px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #eaeaea;
          cursor: pointer;
        }
      }
      .title-text {
        line-height: 38px;
      }
      .min {
        height: 600px;
      }
    }
    .no_data {
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .no_img {
        margin-left: 35px;
      }
    }
  }
  .table-detail {
    padding: 20px;
  }
</style>
